<template>
  <div class="container" :class="iPhoneX&&'iPhoneX'">
    <scroll-view :scroll-y="true" style="height: 100%">
      <!-- 卡/券 平台(普通购买/补尾款)/跳骚 公共模块 -->
      <div class="cardbox">
        <card v-if="goods_type==1" :data="obj"></card>
        <coupon v-if="goods_type==2" :data="obj"></coupon>
      </div>
      <!-- 订单场景-1:平台(普通购买/补尾款) -->
      <div class="platform" v-if="order_scene==1">
        <!-- 金银币抵扣 -->
        <div
          class="deduction"
          v-if="goods_deduction_type!=0||order_type!=3&&goods_is_use_ticket!=0"
        >
          <div class="integral" v-if="goods_deduction_type!=0">
            <div class="top">
              <div class="lft">可使用{{goods_deduction_type==1?'金币':'银币'}}优惠</div>
              <div class="rtt">
                <img
                  v-if="ossUrl"
                  :src="ossUrl+'/mp_3.2.4/reduce@2x.png'"
                  alt
                  @click="switchCoins('-')"
                />
                <input
                  class="inp"
                  v-model="goldCoins"
                  type="number"
                  placeholder="0"
                  @input="inputCoins"
                />
                <img
                  v-if="ossUrl"
                  :src="ossUrl+'/mp_3.2.4/add@2x.png'"
                  alt
                  @click="switchCoins('+')"
                />
              </div>
            </div>
            <div class="bottom">账户剩余{{goods_deduction_type==1?'金币':'银币'}}{{user_credit}}</div>
          </div>
          <div
            class="coupon"
            :class="goods_deduction_type==0&&'none'"
            v-if="order_type!=3&&goods_is_use_ticket!=0"
          >
            <div class="lf">优惠券</div>
            <div class="rt">-¥{{ticket_list[0]&&ticket_list[0].type_money||0}}</div>
          </div>
        </div>
        <!-- 兑换码 -->
        <div class="deduction" v-if="goods_is_use_code!=0">
          <div class="inptel">
            <div class="lf">兑换码</div>
            <div class="rt">
              <input type="text" v-model="serial_code" placeholder="请输入兑换码" @change="inputCode" />
            </div>
          </div>
        </div>
        <!-- 支付方式 -->
        <div class="paystyle" v-if="order_type!=3&&goods_is_user_deposit!=0">
          <div class="lf">支付方式</div>
          <div class="rt">
            <div :class="order_type==1 && 'checked'" @click="changeOrderType(1)">
              <span class="circle"></span>全额支付
            </div>
            <div :class="order_type==2 && 'checked'" @click="changeOrderType(2)">
              <span class="circle"></span>定金支付
            </div>
          </div>
        </div>
        <!-- 详细信息 -->
        <div class="flowingwater">
          <div class="flexline">
            <div class="lf">{{goods_type==1?'卡':'优惠券'}}价格</div>
            <div class="rt">￥{{goods_price}}</div>
          </div>
          <div class="flexline" v-if="order_type!=3&&goods_is_use_ticket!=0">
            <div class="lf">优惠券优惠</div>
            <div class="rt">￥{{ticket_list[0]&&ticket_list[0].type_money||0}}</div>
          </div>
          <div class="flexline" v-if="goods_is_use_code!=0">
            <div class="lf">兑换码优惠</div>
            <div class="rt">￥{{money}}</div>
          </div>
          <div class="flexline" v-if="order_type==3">
            <div class="lf">定金抵扣</div>
            <div class="rt">￥{{order_deposit}}</div>
          </div>
          <div class="flexline" v-if="goods_deduction_type!=0">
            <div class="lf">{{goods_deduction_type==1&&'金币'||goods_deduction_type==2&&'银币'}}抵扣</div>
            <div class="rt">￥{{goldCoins}}</div>
          </div>
          <div class="flexline" v-if="order_type!=2">
            <div class="lf">支付金额</div>
            <div class="rt">￥{{payPrice}}</div>
          </div>
          <div class="flexline" v-if="order_type==2">
            <div class="lf">卡定金</div>
            <div class="rt">￥{{goods_deposit}}</div>
          </div>
          <div class="flexline" v-if="order_type==2">
            <div class="lf">尾款支付</div>
            <div class="rt">￥{{order_final_money}}</div>
          </div>
        </div>
      </div>
      <!-- 订单场景-2:跳骚市场 -->
      <div class="jumpSao" v-if="order_scene==2">
        <div class="tip">
          <icon type="info" size="12" color="#FDD98D"></icon>
          <span class="text">{{sale_username}}用户{{sale_phone}}手机号挂售</span>
        </div>
        <div class="saleinfo">
          <div class="flexline">
            <div class="lf">{{goods_type==1?'卡':'券'}}价格</div>
            <div class="rt">￥{{goods_price}}</div>
          </div>
          <div class="flexline">
            <div class="lf">挂售价格</div>
            <div class="rt">￥{{goods_sale_price}}</div>
          </div>
          <div class="flexline">
            <div class="lf">支付金额</div>
            <div class="rt">￥{{payPrice}}</div>
          </div>
        </div>
      </div>
      <!-- 购卡说明 -- 平台(普通购买/补尾款)/ 跳骚公共模块 -->
      <div class="buyexplain" v-if="order_scene">
        <div>购{{goods_type==1?'卡':'券'}}说明</div>
        <div>1.{{order_scene==1&&goods_type==1&&'卡购买后可在我的-我的卡里进行项目预约'||order_scene==1&&goods_type==2&&'券购买后可在我的-我的券进行项目预约'||order_scene==2&&goods_type==1&&'卡购买后无法退款'||order_scene==2&&goods_type==2&&'券购买后无法退款'||''}}</div>
        <div>2.{{order_scene==1&&goods_type==1&&'卡购买后无法退款，可在我的-我的卡里进行项目转让'||order_scene==1&&goods_type==2&&'券购买后无法退款，可在我的-我的券进行项目转让'||order_scene==2&&goods_type==1&&'点击确认购卡后展示售卖者手机号，进行线下协商'||order_scene==2&&goods_type==2&&'点击确认购券后展示售卖者手机号，进行线下协商'||''}}</div>
      </div>
    </scroll-view>
    <!-- 底部 -- 平台(普通购买/补尾款)/跳骚公共模块 -->
    <div class="footer" :style="{height:(iPhoneX?196:136)+'rpx'}">
      <div class="buycard" @click="toPay">
        <span class="yang">￥</span>
        <span class="price">{{payPrice}}</span>
        <span class="gobuy">立即购{{goods_type==1?'卡':'券'}}</span>
      </div>
    </div>
    <!-- 金银币抵扣验证弹窗-- 平台(普通购买/补尾款) -->
    <div class="mask" v-if="show_check">
      <check :user_tel="userTel" :type="1110" @model_submit="maskSubmit" @closeMask="closeMask"></check>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import check from "@/components/coins/check";
import card from "@/components/card/index";
import coupon from "@/components/coupon/index";
export default {
  components: {
    check,
    card,
    coupon
  },
  data() {
    return {
      ossUrl: common.image_resource, //oss图片
      imgUrl: common.image_response, //http图片
      iPhoneX: false, //是否是iPhoneX
      order_scene: 1, // 订单场景 1：平台 2：跳蚤市场
      order_type: 1, //订单类型 1：全额 2：定金 3：尾款
      goods_id: "", //商品id（全额、定金时传) 107 108
      order_id: 0, //订单id（补尾款时传）默认0
      goods_type: 1, //商品类型 1：卡 2：券
      obj: {}, //传入卡/券组件数据
      goods_price: 0, //原价
      goods_sale_price: 0, //（卡/券）售价
      goods_deduction_type: 1, //金银币抵扣类型 0：不抵扣 1：抵扣金币 2：抵扣银币
      goods_usable_credit: 0, //商品可用金银币
      user_credit: 0, //用户账户金银币
      goods_is_use_ticket: "", //	是否可用优惠券 0否 1是
      goods_is_use_code: "", //	是否可用兑换码 0否 1是
      goods_is_user_deposit: "", //是否支持定金支付 0否 1是
      goods_deposit: 0, //商品定金金额
      order_final_money: 0, //订单尾款金额
      order_deposit: 0, //订单定金金额
      ticket_list: [], //优惠券数据
      sale_username: "", //售卖者用户名称
      sale_phone: "", //售卖者用户手机号
      serial_code: "", //兑换码
      sms_code: "", //验证码（金银币抵扣必传）
      money: 0, //兑换码金额
      goldCoins: 0, //用户实际可抵金币
      model_type: 0, // 0 无金币 1 金币足额，2 金币不足
      show_check: false, //金银币验证弹窗
      payPrice: 0, //支付金额
      userTel: "" //用户手机号
    };
  },
  onLoad(options) {
    Object.assign(this.$data, this.$options.data());
    // 设置导航栏标题
    wx.setNavigationBarTitle({
      title: "确认信息"
    });
    //获取系统信息
    let that = this;
    wx.getSystemInfo({
      success: res => {
        this.windowWidth = res.windowWidth;
        if (res.model.search("iPhone X") != -1) {
          that.iPhoneX = true;
        }
      }
    });
    // 获取传递参数
    this.order_scene = options.order_scene || "";
    this.order_type = options.order_type || 1;
    this.goods_id = options.goods_id || "";
    this.order_id = options.order_id || 0;
    // 查询订单信息
    this.getOrderInfo();
  },
  onShow() {
    if (wx.getStorageSync("user_data")) {
      let user_data = wx.getStorageSync("user_data");
      let tel = user_data.username;
      this.userTel = tel.substr(tel.length - 4);
    }
  },
  methods: {
    // 获取订单信息
    getOrderInfo() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/buy/confirm",
        {
          order_scene: this.order_scene,
          order_type: this.order_type,
          goods_id: this.goods_id,
          order_id: this.order_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.obj = {
              sign: res.data.goods_sign || "",
              name: res.data.goods_name || "",
              desc: res.data.goods_describe || "",
              price:
                (this.order_scene == 1 && res.data.goods_price) ||
                (this.order_scene == 2 && res.data.goods_sale_price) ||
                0,
              min_sale_price: res.data.goods_min_sale_price || 0,
              goods_image: res.data.goods_image || "",
              sale: res.data.goods_sale_count || "",
              goods_deduction_type: res.data.goods_deduction_type || 0,
              order_scene: this.order_scene
            };
            this.goods_type = res.data.goods_type || 1;
            this.goods_price = res.data.goods_price || 0;
            this.goods_sale_price = res.data.goods_sale_price || 0;
            this.goods_deduction_type = res.data.goods_deduction_type || 0;
            this.goods_usable_credit = res.data.goods_usable_credit || 0;
            this.user_credit = res.data.user_credit || 0;
            this.goods_is_use_ticket = res.data.goods_is_use_ticket || "";
            this.goods_is_use_code = res.data.goods_is_use_code || "";
            this.goods_is_user_deposit = res.data.goods_is_user_deposit || "";
            this.goods_deposit = res.data.goods_deposit || 0;
            this.order_final_money = this.subtract(
              this.goods_price,
              this.goods_deposit
            );
            this.order_deposit = res.data.order_deposit || 0;
            this.ticket_list = res.data.ticket_list || [];
            this.sale_username = res.data.sale_username || "";
            this.sale_phone = res.data.sale_phone || "";
            // 计算合计
            this.countFn(this.user_credit);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 价格计算
    countFn(integral) {
      if (this.order_scene == 1) {
        /* 平台-全额or定金or尾款 */
        // 卡(全额，尾款)or卡定金
        let price =
          (this.order_type != 2 && this.goods_price) ||
          (this.order_type == 2 && this.goods_deposit) ||
          0;
        // 券优惠(全额，定金) or 定金抵扣
        let deduc =
          (this.order_type != 3 &&
            this.ticket_list[0] &&
            this.ticket_list[0].type_money) ||
          (this.order_type == 3 && this.order_deposit) ||
          0;
        // price - deduc - 兑换码
        let priceDeduc =
          this.subtract(price, deduc) > 0 ? this.subtract(price, deduc) : 0;
        let firstCha =
          this.subtract(priceDeduc, this.money) > 0
            ? this.subtract(priceDeduc, this.money)
            : 0;
        //计算用户实际可用金银币 1: firstCha - 金/银币 2:对比商品可用金/银币
        let secondCha = firstCha - integral > 0 ? integral : firstCha;
        if (secondCha - this.goods_usable_credit >= 0) {
          this.goldCoins = this.goods_usable_credit;
        } else {
          //金银币不能为小数，所以向下取整
          this.goldCoins = Math.floor(secondCha);
        }
        // 合计
        let total = this.subtract(firstCha, this.goldCoins);
        this.payPrice = total > 0 ? total : 0;
      } else if (this.order_scene == 2) {
        /* 跳蚤市场 */
        this.payPrice = this.goods_sale_price || 0;
      }
    },
    // 切换支付方式
    changeOrderType(val) {
      this.order_type = val;
      this.countFn(this.goldCoins);
    },
    //   加减金/银币
    switchCoins(type) {
      switch (type) {
        case "+":
          if (this.goldCoins >= this.user_credit) {
            if (this.user_credit >= this.goods_usable_credit) {
              this.goldCoins = this.goods_usable_credit;
            } else {
              this.goldCoins = this.user_credit;
            }
          } else {
            if (this.goldCoins >= this.goods_usable_credit) {
              this.goldCoins = this.goods_usable_credit;
            } else {
              this.goldCoins++;
            }
          }
          break;
        case "-":
          this.goldCoins > 0 ? this.goldCoins-- : 0;
          break;
      }
      this.countFn(this.goldCoins);
    },
    // 输入金/银币
    inputCoins() {
      let inputVal = (this.goldCoins * 1) | 0 || 0; //将任意数据转换成整数
      if (inputVal > 0) {
        if (inputVal >= this.user_credit) {
          if (this.user_credit >= this.goods_usable_credit) {
            this.goldCoins = this.goods_usable_credit;
          } else {
            this.goldCoins = this.user_credit;
          }
        } else {
          if (inputVal >= this.goods_usable_credit) {
            this.goldCoins = this.goods_usable_credit;
          } else {
            this.goldCoins = inputVal;
          }
        }
      } else {
        this.goldCoins = 0;
      }
      this.countFn(this.goldCoins);
    },
    // 输入兑换码
    inputCode(e) {
      if (!this.serial_code) {
        return;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/buy/getSerialCode",
        {
          serial_code: this.serial_code,
          goods_id: this.goods_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.money = res.data.money;
            this.countFn(this.goldCoins);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 立即购卡
    toPay() {
      if (this.order_scene != 1) {
        //跳蚤市场支付，无金银币
        this.order();
        return;
      }
      // 平台支付走金银币抵扣流程
      if (this.payPrice == 0 && this.goldCoins > 0) {
        //金币足额使用->弹窗->支付成功页
        this.model_type = 1;
        this.show_check = true;
      } else if (this.payPrice > 0 && this.goldCoins > 0) {
        // 金币不足->弹窗->收银台
        this.model_type = 2;
        this.show_check = true;
      } else if (this.goldCoins == 0) {
        //无金币 -> 收银台
        this.model_type = 0;
        this.order();
      }
    },
    // 金银币抵扣验证模态框提交
    maskSubmit(type, sms_code) {
      this.sms_code = sms_code;
      this.show_check = false;
      // 下单
      this.order();
    },
    // 关闭金银币弹窗
    closeMask() {
      this.show_check = false;
    },
    // 创建订单
    order() {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/buy/submit",
        {
          order_scene: this.order_scene,
          order_type: this.order_type,
          goods_id: this.goods_id,
          order_id: this.order_id,
          gold_credit: (this.goods_deduction_type == 1 && this.goldCoins) || 0,
          silver_credit:
            (this.goods_deduction_type == 2 && this.goldCoins) || 0,
          coupon_id: (this.ticket_list[0] && this.ticket_list[0].id) || "",
          serial_code: this.serial_code,
          sms_code: this.sms_code
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            // 足额抵扣，无需调起支付 -> 支付成功 Or 跳蚤市场购卡无需支付线下交易
            if (this.model_type == 1 || this.order_scene == 2) {
              wx.redirectTo({
                url: `/pages/ct_store/order_confirm/main?order_scene=${
                  this.order_scene
                }&sale_phone=${this.sale_phone}`
              });
              return;
            }
            // 调起微信支付
            this.wechat_pay(res.data);
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 支付
    wechat_pay({ body_title, is_pay, order_price, order_sn, order_type }) {
      let that = this;
      wx.getStorage({
        key: "open_id",
        success: res => {
          const open_id = res.data;
          common.fly_post(
            "api/v4_5/payment/wechatpay_miniapp_submit",
            {
              //预支付
              openid: open_id,
              body: body_title,
              order_sn: order_sn,
              total: order_price,
              submit_type: order_type
            },
            msg => {
              common.mmk_Loading(1);
              let res = msg.data;
              if (res.status_code == 0) {
                wx.requestPayment({
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: "MD5",
                  paySign: res.data.paySign,
                  success: function(res) {
                    wx.redirectTo({
                      url: `/pages/ct_store/order_confirm/main?order_scene=${
                        that.order_scene
                      }`
                    });
                  },
                  fail: function(res) {
                    //  支付失败
                    wx.showToast({
                      title: "支付失败，请重试", //提示的内容,
                      icon: "none", //图标,
                      duration: 1500, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => {}
                    });
                  }
                });
              } else {
                common.mmk_Loading(1);
                common.mmk_Loading(2, res.message);
              }
            }
          );
        },
        fail: () => {
          wx.showToast({
            title: "请先登录", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {}
          });
        }
      });
    },
    // 两数相加方法
    add(arg1, arg2) {
      return (Math.round(arg1 * 100) + Math.round(arg2 * 100)) / 100;
    },
    // 两数相减（既一正数加一负数）
    subtract(arg1, arg2) {
      return this.add(arg1, -arg2);
    }
  }
};
</script>

<style lang="less" scoped>
.Bg {
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  padding: 12px 10px;
  margin: 0 10px 10px;
  box-sizing: border-box;
}
@fontFamily: PingFangSC-Regular, PingFang SC;
.telRt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
}
.waterStyle {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: pTR(32);
}
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  padding-bottom: 68px;
  box-sizing: border-box;
  // 卡/券 盒子
  .cardbox {
    padding: 12px;
    border-radius: 1px 1px 20px 20px;
    box-sizing: border-box;
  }
  //   平台
  .platform {
    box-sizing: border-box;
    //   金银币抵扣
    .deduction {
      .Bg;
      .integral {
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 2px;
          .lft {
            font-size: 14px;
            font-family: @fontFamily;
            font-weight: 400;
            color: rgba(29, 29, 29, 1);
            line-height: 20px;
          }
          .rtt {
            display: flex;
            align-items: center;
            img {
              width: 16px;
              height: 16px;
            }
            .inp {
              max-width: 40px;
              height: 20px;
              text-align: center;
              font-size: 14px;
              font-family: @fontFamily;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
            }
          }
        }
        .bottom {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
        }
      }
      .coupon {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f2f2f2;
        box-sizing: border-box;
        &.none {
          margin-top: 0;
          padding-top: 0;
          border-top: 0;
        }
        .lf {
          font-size: 14px;
          font-family: @fontFamily;
          font-weight: 400;
          color: rgba(29, 29, 29, 1);
          line-height: 18px;
          .tip {
            width: 62px;
            background: rgba(255, 237, 243, 1);
            border-radius: 2px;
            text-align: center;
            font-size: 10px;
            font-family: @fontFamily;
            font-weight: 400;
            color: rgba(255, 115, 164, 1);
            margin-left: 5px;
            padding: 3px 1px;
            position: relative;
            top: -2px;
            box-sizing: border-box;
            .text {
              position: relative;
              bottom: 4px;
            }
          }
        }
        .rt {
          font-size: 14px;
          font-family: @fontFamily;
          font-weight: 400;
          color: rgba(255, 56, 62, 1);
          line-height: 20px;
        }
      }
      .inptel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .lf {
          width: 34%;
          font-size: 14px;
          font-family: @fontFamily;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
        }
        .rt {
          flex: 1;
          .telRt;
          input {
            text-align: right;
            width: 100%;
            &::-webkit-input-placeholder {
              .telRt;
            }
          }
        }
        &.mgt {
          margin-top: 15px;
        }
      }
    }
    //   支付方式
    .paystyle {
      .Bg;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      .lf {
        font-size: 14px;
        font-family: @fontFamily;
        font-weight: 400;
        color: rgba(29, 29, 29, 1);
        line-height: 20px;
        margin-right: 24px;
      }
      .rt {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        div {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 18px;
          margin-right: 22px;
          .circle {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid #979797;
            margin-right: 3px;
            vertical-align: -2px;
          }
          &.checked {
            color: #333333;
            .circle {
              border: 1px solid #3EB0A9;
              position: relative;
              &::after {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                content: "";
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #3EB0A9;
                //   margin: 2px;
              }
            }
          }
        }
      }
    }
    //   详细信息
    .flowingwater {
      .Bg;
      .flexline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        &:last-child {
          margin-bottom: 0;
        }
        .lf {
          font-size: 12px;
          .waterStyle;
        }
        .rt {
          font-size: 14px;
          .waterStyle;
        }
      }
    }
  }

  //   购卡说明
  .buyexplain {
    .Bg;
    background-color: transparent;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 13px;
    div {
      margin-bottom: 10px;
    }
  }
  //   底部
  .footer {
    width: 100%;
    height: 53px;
    padding: 5px 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 5px 0px rgba(229, 229, 229, 0.48);
    position: fixed;
    left: 0;
    bottom: 0;
    .buycard {
      width: 345px;
      background: linear-gradient(
        270deg,
        rgba(232, 58, 94, 1) 0%,
        rgba(255, 168, 70, 1) 100%
      );
      border-radius: 8px;
      margin: 10px auto;
      text-align: center;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      line-height: 22px;
      padding: 8px 0;
      box-sizing: border-box;
      .price {
        font-size: 20px;
        margin: 0 5px 0 1px;
      }
    }
  }

  //   金银币抵扣弹窗
  .mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
  }
  //      跳骚市场
  .jumpSao {
    box-sizing: border-box;
    .tip {
      margin: 0 10px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
      icon {
        margin-right: 4px;
        vertical-align: -1px;
      }
    }
    .saleinfo {
      .Bg;
      .flexline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        &:last-child {
          margin-bottom: 0;
        }
        .lf {
          font-size: 12px;
          .waterStyle;
        }
        .rt {
          font-size: 14px;
          .waterStyle;
        }
      }
    }
  }
}
.iPhoneX {
  padding-bottom: 98px;
}
</style>